<template>
  <div class="love-music-player">
    <div id="audio" class="audio audio-off">
      <audio id="audio-my" ref="audio_my" src="../assets/music/m1.mp3" preload="metadata"></audio>

      <div class="audio-head">
        <div class="audio-head-tittle">
          <div class="audio-head-tittle-text audio-head-tittle-text-off"></div>
        </div>
        <div class="audio-head-tittle-by"></div>
      </div>
      <div class="add"></div>
      <div class="min-time"></div>
      <div class="audio-img">
        <canvas id="audio-img-canvas" width="200px" height="200px"></canvas>
        <div class="audio-img-cover audio-img-cover-off"></div>
        <canvas id="audio-img-canvas-play" class="audio-img-canvas-play-off" width="45px" height="200px"></canvas>
      </div>
      <div class="audio-text">歌词待更新</div>
      <div class="audio-by">
        <div class="audio-by-all">
          <span class="audio-by-now"></span>
        </div>
        <div class="audio-by-text">
          <span class="audio-by-text-now">00:00</span>
          <span class="audio-by-text-all">00:00</span>
        </div>
      </div>
      <div class="audio-btn">
        <div class="audio-btn-list audio-btn-list-off"></div>
        <div class="audio-btn-before"></div>
        <div class="audio-btn-play audio-btn-play-off audio-btn-play-off-a"></div>
        <div class="audio-btn-sound"></div>
        <div class="audio-btn-next"></div>
      </div>
      <div class="audio-sound">
        <div class="audio-sound-all">
          <span class="audio-sound-now"></span>
          <span class="audio-sound-art"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import music from './love-music-player_func'
  export default {
    name: 'love-music-player',
    data() {
      return {
        audioPlay: false,
        audioMax: false,
        audioName: ['hhh','222'],
        audioText: ['ssssssss', 'xxxxx'],
        audioLoop: true,
        outTextValue: 0,
        audioSpeed: 1.8,
        audiaIndex: 0
      }
    },
    created() {
      $('.audio-head-tittle-text').text(this.audioText[1]);
      $('.audio-head-tittle-text-out').text(this.audioText[1]);
      $('.audio-head-tittle-text-out-a').text(this.audioText[1]);
      $('.audio-head-tittle-by').text(this.audioText[0]);
      var audio = this.$refs.audio_my
      music.drawAudioArc();
      music.drawAudioPlay();
      music.updateVolume(0, 0.5);
      $('#audio-my').on("loadedmetadata", function(){
        $('.audio-by-text-now').text(music.timeFormat(0));
        $('.audio-by-text-all').text(music.timeFormat(audio.duration));
        music.enableProgressDrag();
        music.enableSoundDrag();
      });
      $('.audio-by-text-now').text(music.timeFormat(0));
      $('.audio-by-text-all').text(music.timeFormat(audio.duration));
      $('#audio-my').on("timeupdate", function(){
        var currentTime = audio.currentTime;
        var duration = audio.duration;
        var percent = 100 * currentTime / duration;
        $('.audio-by-now').css('width', percent + '%');
        $('.min-time').css('width', percent+'%');
        $('.audio-by-text-now').text(music.timeFormat(currentTime));
        music.audioTextOut();
      });
      $('#audio-my').on('ended', function() {
        if(!this.audioLoop){
          music.audioIndex += 1;
        }
        music.qiehuan();
      });
      $('#audio-img-canvas-play').on('click', function () {
        music.playAudio();
      });
      $('.audio-btn-play').on('click', function () {
        music.playAudio();
      });
      $('.audio-btn-next').on('click', function () {
        this.audioIndex += 1;
        music.qiehuan();
      })
      $('.audio-btn-before').on('click', function () {
        music.audioIndex -= 1;
        music.qiehuan();
      })
      $('.audio-btn-sound').on('click', function () {
        $('.audio-sound').toggleClass('audio-sound-on');
      });
      $('.audio-btn-list').on('click', function () {
        if (!audioLoop){
          $('.audio-btn-list').removeClass('audio-btn-list-off').addClass('audio-btn-list-on');
        } else {
          $('.audio-btn-list').removeClass('audio-btn-list-on').addClass('audio-btn-list-off');
        }
        audioLoop = ! audioLoop;
      });
      $("#audio").hover(function() {
        $('.audio').toggleClass('audio-off');
        $('.audio-img-cover').toggleClass('audio-img-cover-off');
        $('.audio-btn-play').toggleClass('audio-btn-play-off-a');
        $('.audio-head-tittle-by').toggleClass('audio-head-tittle-by-off');
        $('.audio-head-tittle').toggleClass('audio-head-tittle-off');
        $('.min-time').toggleClass('min-time-off');
        $('.audio-head-tittle-text').toggleClass('audio-head-tittle-text-off');
        $('.audio-btn-play').css('animation', '');
        audioMax = !audioMax;
        $('.audio-head-tittle-text').css('text-indent', 0);
        outTextValue = 0;
        audioSpeed = Math.abs(audioSpeed);
      });
      $("#audio").mouseleave(function() {
        if(audioPlay){
          $('.audio-btn-play').css('animation', 'img-cover linear 2.5s infinite');
        }
        $('.audio-sound').removeClass('audio-sound-on');
      })

    }
  }
</script>

<style scoped>
  .love-music-player {
    position: absolute;
    width: 100%;
    z-index: 9;
  }
  .love-music-player *{
    border: none;
    margin: 0;
    padding: 0;
  }
  .love-music-player ul,.love-music-player ol{
    list-style: none;
  }
  .love-music-player a{
    text-decoration: none;
  }
  .love-music-player .audio{
    position: relative;
    margin: auto;
    top: 1%;
    height: 44.5rem;
    width: 30rem;
    overflow: hidden;
    transition: all .5s;
    border-radius: 2rem;
    background: linear-gradient(rgba(144, 54, 124, 0.5) 0, rgba(241, 152, 156, 0.5) 44.5rem);
  }
  .love-music-player .audio-off{
    height: 5rem;
    /*250px*/
    width: 5rem;
    border-radius: 100%;
  }
  .love-music-player.audio-head{
    position: absolute;
    margin: auto;
    width: 100%;
    height: 5rem;
  }
  .love-music-player .add{
    position: relative;
    width: 80%;
    height: 5rem;
  }
  .min-time{
    position: absolute;
    width: 0;
    opacity: 1;
    height: 0.4rem;
    margin-top: -0.4rem;
    background: rgba(244, 234, 255, 0.4);
    transition: all .5s;
  }
  .min-time-off{
    width: 0;
    opacity: 0;
  }
  .audio-head-tittle{
    height: 100%;
    line-height: 5rem;
    color: aquamarine;
    font-size: 2.3rem;
    font-weight: bold;
    text-align: center;
    transition: all .5s;
  }
  .audio-head-tittle-text{
    width: 90%;
    margin-left: 5%;
    text-overflow: clip;
    word-break:keep-all;
    white-space:nowrap;
    overflow: hidden;
  }
  .audio-head-tittle-text-off{
    width: 60%;
    margin-left: 20%;
  }
  .audio-head-tittle-text-out{
    font-size: 2.3rem;
    display: none;
  }
  .audio-head-tittle-text-out-a{
    font-size: 20px;
    display: none;
  }
  .audio-head-tittle-by{
    margin: auto;
    height: 50%;
    line-height: 5rem;
    color: #de9fff;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transition: all .5s;
  }
  .audio-head-tittle-by-off{
    opacity: 1;
  }
  .audio-head-tittle-off{
    width: 100%;
    height: 50%;
    font-size: 2rem;
  }
  .audio-img{
    position: relative;
    width: 100%;
    height: 30rem;
    margin-top: -4rem;
  }
  #audio-img-canvas{
    margin: 5rem 5rem;
    background: rgba(0, 0, 255, 0);
    transition: all 1s;
  }
  .audio-img-canvas-on{
    animation: img-cover 2.5s linear infinite .5s;
  }
  @keyframes img-cover {
    from{transform: rotate(0)}
    to{transform: rotate(360deg)}
  }
  .audio-img-cover{
    position: absolute;
    width: 9rem;
    height: 9rem;
    top: 50%;
    left: 50%;
    margin-top: -4.5rem;
    margin-left: -4.5rem;
    border-radius: 50%;
    background: url("../assets/music/timg.jpg") no-repeat center;
    background-size: 9rem 9rem;
    transition: all .5s;
  }
  .audio-img-cover-off{
    position: absolute;
    width: 4rem;
    height: 4rem;
    top: 50%;
    left: 50%;
    margin-top: -15.5rem;
    margin-left: -12.5rem;
    background-size: 4rem 4rem;
  }
  #audio-img-canvas-play{
    position: absolute;
    background: rgba(0, 0, 255, 0);
    left: 23.5rem;
    top: 4rem;
    transform-origin: top;
    cursor: pointer;
  }
  .audio-img-canvas-play-off{
    transition: all .5s;
    transform: rotate(10deg);
  }
  .audio-img-canvas-play-on{
    transition: all .5s;
    transform: rotate(23deg);
  }
  .audio-text{
    display: none;
  }
  .audio-by{
    position: relative;
    margin-top: -2.5rem;
    width: 100%;
    height: 5rem;
  }
  .audio-by-all{
    position: relative;
    margin: auto;
    width: 100%;
    height: 0.7rem;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
  }
  .audio-by-now{
    display: block;
    width: 0;
    height: 100%;
    transition: all .3s linear;
    background: #bd428c;
  }
  .audio-by-text{
    width: 100%;
    height: 2rem;
  }
  .audio-by-text-now, .audio-by-text-all{
    display: block;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.5rem;
    color: white;
  }
  .audio-by-text-now{
    float: left;
    margin-left: 5%;
  }
  .audio-by-text-all{
    float: right;
    margin-right: 5%;
  }
  .audio-btn{
    position: relative;
    margin: auto;
    width: 90%;
    height: 10rem;
    margin-top: -2rem;
  }
  .audio-btn-list{
    display: inline-block;
    float: left;
    width: 3.6rem;
    height: 3.6rem;
    margin: 3.2rem 4rem;
    cursor: pointer;
    transition: all .5s;
  }
  .audio-btn-list-on{
    background: url("../assets/music/循环.png") no-repeat center;
    background-size: 3.6rem 3.6rem;
  }
  .audio-btn-list-off{
    background: url("../assets/music/循环.png") no-repeat center;
    background-size: 3.6rem 3.6rem;
  }
  .audio-btn-before,
  .audio-btn-sound,
  .audio-btn-sound,
  .audio-btn-next,

  {
    display: inline-block;
    width: 3.6rem;
    height: 3.6rem;
    background-size: 3.6rem 3.6rem;
    margin: 3.2rem 4rem;
    cursor: pointer;
  }
  .audio-btn-before{
    float: left;
    background: url("../assets/music/上一个，上一曲.png") no-repeat center;

  }
  .audio-btn-sound{
    float: right;
    background: url("../assets/music/声音.png") no-repeat center;
  }
  .audio-btn-next{
    float: right;
    background: url("../assets/music/下一个，下一曲.png") no-repeat center;
  }
  .audio-btn-play{
    position: absolute;
    width: 7rem;
    height: 7rem;
    top: 50%;
    margin-top: -3.5rem;
    left: 50%;
    margin-left: -3.5rem;
    transition: all .5s;
    cursor: pointer;
  }
  .audio-btn-play-off{
    background: url("../assets/music/暂停.png") no-repeat center;
    background-size: 7rem 7rem;
  }
  .audio-btn-play-on{
    background: url("../assets/music/播放.png") no-repeat center;
    background-size: 7rem 7rem;
  }
  .audio-btn-play-off-a{
    position: absolute;
    width: 4rem;
    height: 4rem;
    top: 80%;
    margin-top: -36rem;
    left: 50%;
    margin-left: -1.7rem;
    cursor: pointer;
    background-size: 4rem 4rem;
  }
  .audio-sound{
    height: 0.6rem;
    width: 0;
    margin-left: 5%;
    position: relative;
    opacity: 0;
    overflow: hidden;
    transition: all .5s;
  }
  .audio-sound-on{
    width: 90%;
    opacity: 1;
    overflow: visible;
  }
  .audio-sound-all{
    position: relative;
    margin: auto;
    width: 100%;
    height: 0.6rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    cursor: pointer;
  }
  .audio-sound-now{
    display: block;
    height: 100%;
    background: rgb(244, 234, 255);
    border-radius: 0.5rem;
  }
  .audio-sound-art{
    display: block;
    position: absolute;
    margin-top: -1.1rem;
    margin-left: -0.8rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgb(244, 234, 255);
  }
</style>
